<template>
        <ul class="modeSortMsg clearfix" v-show="modeSort" :style="editStyle">
            <li class="modeSortMsgItem" v-for="item in indexMsg.cats[modeKey][modeKey]" :key="item.id">
                <h4 class="colorYellow">{{item.catname}}</h4>
                <ul>
                    <li class="miniSort" v-for="itemChild in indexMsg.cats[modeKey][item.id]" :key="itemChild.id">
                        <router-link :to="{path:goUrl,query:{type:type,catid1:item.id,catid2:itemChild.id,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">{{itemChild.catname}}</router-link>
                    </li>
                </ul>
                <router-link :to="{path:goUrl,query:{type:type,catid1:item.id,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">
                    <footer v-if="indexMsg.cats[modeKey][item.id].length>4">查看更多</footer>
                </router-link>
            </li>
            <li v-if="indexMsg.cats[modeKey][modeKey].length>8" class="lineItem"></li>
        </ul>
    
</template>
<script>
export default {
    name:"dropDown",
    props: ["modeSort","editStyle","modeKey","indexMsg","goUrl","type"],
    data () {
        return{
           data:{
              modeSort : false,//模型开关
           },
           modeChileList:null,//小类的列表
        }
    },
    methods:{
        lookMore (e) {
            // $(e.target).prev().toggleClass("autoHeight");
            // $(e.target).text("点击收起")
        }
    }
}
</script>
<style>
    .autoHeight{
        height:auto!important;
    }
    .modeSortMsgItem li a{
        display:inline-block;
        padding: 0 5px;
        border-radius: 3px;
        background: #fff;
        color: #666;
    }
    .modeSortMsgItem li:hover a{
        background: #e4615c;
        color: #fff;
        line-height: 20px;
    }
    .lineItem{
        position:absolute;
        top: 194px;
        width: 90%;
        padding-right: 34px;
        border: 1px solid #dddddd;
    }
</style>